<template>
  <div class="bg-fff h-100p bdr-10 pd-10">
    <el-menu :default-active="biddingMethod" mode="horizontal" class="bdr-top-10">
      <el-menu-item @click="getBills('')" index="">全部</el-menu-item>
      <el-menu-item @click="getBills('0')" index="0">一口价
        <v-plain-tips :num="orderTips.zero_sum"/>
      </el-menu-item>
      <el-menu-item @click="getBills('1')" index="1">竞价
        <v-plain-tips :num="orderTips.one_sum"/>
      </el-menu-item>
    </el-menu>
    <div class="bg-fff pd-10 fx-1 bdr-bottom-10">
      <div class="top">
        <el-radio-group v-model="orderStatus" @change="getBills(biddingMethod)">
          <el-radio-button :label="item.value" v-for="item in $dict.orderTypes" :key="item.value">{{item.label}}
            <v-plain-tips class="tips" :num="orderTips.zero_order_sum+orderTips.one_order_sum" v-if="item.value===0"/>
            <v-plain-tips class="tips" :num="orderTips.zero_to_endorse_sum+orderTips.one_to_endorse_sum"
                          v-if="item.value===2"/>
            <v-plain-tips class="tips" :num="orderTips.zero_to_release_sum+orderTips.one_to_release_sum"
                          v-if="item.value===3"/>
          </el-radio-button>
        </el-radio-group>
        <em class="fx-1"></em>
        <el-checkbox v-model="isCard" label="卡片模式" border></el-checkbox>
      </div>
      <div class="panel">
        <v-bill-card-order-list v-if="isCard" :bills="bills" @change="change"></v-bill-card-order-list>
        <v-plain-table v-else :data="bills" @change="change">
          <template slot="expand" slot-scope="{scope}">
            <el-button type="text" @click="showEndorsed(scope.row)" v-if="scope.row.orderStatus === 2">背书</el-button>
            <el-button type="text" @click="showBillDetail(scope.row)">详情</el-button>
          </template>
        </v-plain-table>
      </div>
    </div>
    <v-plain-dialog
            title="票据详情"
            width="60%"
            ref="detail">
      <v-bill-detail :bill="currentBillDetail"/>
    </v-plain-dialog>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillCardOrderList from '@/components/bill-card-order-list'
  import vPlainTable from '@/components/plain-table'
  import vPlainDialog from '@/components/plain-dialog'
  import vBillDetail from '@/components/bill-detail'
  import vBillTransInfo from '@/components/bill-trans-info'
  import { Action, Getter } from 'vuex-class'
  import vPlainTips from '@/components/plain-tips'

  @Component({
    components: {
      vBillCardOrderList, vPlainTable, vPlainDialog, vBillDetail, vBillTransInfo, vPlainTips
    }
  })
  export default class Order extends Vue {
    orderStatus = ''
    biddingMethod = ''
    isCard = false
    bills: TableData = {
      header: [
        {
          key: 'id',
          label: '订单号'
        },
        {
          key: 'billNumber',
          label: '票据号'
        },
        {
          key: 'createTime',
          label: '订单生成时间'
        },
        {
          key: 'faceValue',
          label: '票面金额'
        },
        {
          key: 'discountPrice',
          label: '成交金额'
        },
        {
          key: 'orderStatus',
          label: '订单状态',
          formatter: row => this.$utils.toTypeFormat(row.orderStatus, this.$dict.orderTypes)
        },
        {
          key: 'date',
          label: '录入日期',
          formatter: row => this.$utils.toTimeFormat(row.date)
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }
    currentBillDetail = {}

    get activeIndex () {
      return this.$route.path
    }

    @Action getOrderTips
    @Getter orderTips
    @Getter userInfo

    async getBills (biddingMethod = '') {
      this.biddingMethod = biddingMethod
      let res: AjaxResponse = await this.$axios.post('b/boms/order', {
        pageSize: 10,
        currentPage: this.bills.footer.currentPage,
        orderStatus: this.orderStatus,
        biddingMethod: this.biddingMethod
      })
      if (res.responseCode === 200) {
        this.bills.body = res.data.items
        this.bills.footer.total = res.data.totalNum
      }
    }

    async showBillDetail ({ billId }) {
      let res: AjaxResponse = await this.$axios.get(`b/boms/bill/${billId}`)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.$refs.detail.openDialog()
      }
    }

    async showEndorsed ({ id }) {
      let res: AjaxResponse = await this.$axios.post(`g/gateway/txn/endorsed/${id}`)
      this.$utils.tips(res)
    }

    change (page) {
      this.bills.footer.currentPage = page
      this.getBills()
    }

    mounted () {

      if(this.$route.query.type){
        this.orderStatus = this.$route.query.type
      }

      this.getBills()
      this.getOrderTips()
      if (this.userInfo.roleType === 1) {
        this.bills.header.push({
          key:'orderCommision',
          label:'掌柜利润'
        })
      }
      setInterval(_ => {
        this.getBills()
      }, 1000 * 60 * 3)
    }
  }
</script>

<style lang="less" scoped>
  .mh-100p {
    display: flex;
    flex-direction: column;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .top {
    display: flex;
    padding-bottom: 20px;
  }

  .operation {
    margin-top: 20px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;
  }

  .tips {
    position: absolute;
    right: 2px;
    top: 10px;
  }
</style>
